/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2022-02-22 17:24 周2
 * @Description  : 授权app
 */

import styled from "@emotion/styled";
import { Button, Dropdown, Menu } from "antd";
import { ReactComponent as SoftWareLogo } from "assets/software-logo.svg";
import { Row } from "components/lib";
import { useAuth } from "context/auth-context";
import { useDocmentTitle } from "hooks";
import React from "react";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter } from "react-router-dom";
import { resetRoute } from "routers";
import ProjectScreen from "screens/project";
import ProjectListScreen from "screens/project-list";

export default function AuthenticatedApp() {
  useDocmentTitle("项目列表", false);

  return (
    <Container>
      <PageHeader />
      <Main>
        <BrowserRouter>
          <Routes>
            <Route index element={<Navigate to={"projects"} />} />
            <Route path={"projects"} element={<ProjectListScreen />} />
            <Route path={"projects/:projectId/*"} element={<ProjectScreen />} />
          </Routes>
        </BrowserRouter>
      </Main>
    </Container>
  );
}

const PageHeader = () => {
  const { logout, user } = useAuth();

  return (
    <Header between={true}>
      <HeaderLeft gap={2}>
        <Button type={"link"} onClick={resetRoute}>
          <SoftWareLogo width={"18rem"} color={"rgb(38,132,255)"} />
        </Button>
        <h3>项目</h3>
        <h3>用户</h3>
      </HeaderLeft>
      <HeaderRight>
        <Dropdown
          overlay={
            <Menu>
              <Menu.Item key={"logout"} onClick={logout}>
                退出登录
              </Menu.Item>
            </Menu>
          }
        >
          <Button type={"link"}>Hi, {user?.name}</Button>
        </Dropdown>
      </HeaderRight>
    </Header>
  );
};

const Container = styled.div`
  height: 100vh;
  display: grid;
  grid-template-rows: 6rem calc(100vh - 6rem);
`;

const Header = styled(Row)`
  height: 6rem;
  padding: 2rem;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 1;
`;

const Main = styled.main``;

const HeaderLeft = styled(Row)``;

const HeaderRight = styled.div``;
